<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/layui/css/layui.css">
    <script type="text/javascript" src="/layui/layui.js"></script>
    <title>账户设置</title>
    <style>
        body{
            background-color: rgba(251, 255, 241, 0);
        }
        #div_t{
            width: 99%;
            height: 50px;
            background-color: #F1F1F1;
            border: 2px solid #C7D2CF;
        }
        .div_I{
            width:5px;
            height:20px;
            background-color:#1ABC9C;
            margin-top:15px;
        }
        .t_p{
            margin-left:10px;
            margin-top:-20px;
            color: #c3b097;
        }
        .div_btn{
            margin-left: 80%;
            margin-top: -26px;
            width: 200px;
        }
        .btn_class{
            height: 35px;
        }

        .div_head{
            width:130px;
            height:150px;
            margin-left:140px;
            margin-top:45px;
        }
        #div_up{
            margin-right: 30px;
        }
        #avatarUrl{
            width: 114px;
            height: 110px;
            border-radius: 100%;
        }
        #upload_pictures{
            text-align:center;
            color:#1AC2C6;
            margin-left: 16px;
            cursor:pointer;
        }
        .div_forms{
            margin-top:70px;
        }
        #account-form{
            width:700px;
            height:500px;
            margin-left:350px;
            margin-top:40px;
        }
        .div_table{
            margin-top:-50px;
            border-collapse:separate;
            border-spacing:0px 10px;
        }
        #submit_id{
            color: white;
            text-align: center;
            font-size:17px;
            margin-right:350px;
        }
        span{
            color:#F04844;
        }
        #trueName{
            background-color: #F2F2F2;
        }
        #email{
            background-color: #F2F2F2;
        }

    </style>
</head>
<body>
<!-- 李亚峰 -->
<!-- 头 -->
    <div id="div_t">
        <div class="div_I"></div>
        <p class="t_p">账户设置</p>
        <div class="div_btn">
            <button type="button" class="layui-btn btn_class">
                <i class="layui-icon layui-icon-refresh"></i>刷新
            </button>
            <button onclick="backOff()" type="button" class="layui-btn btn_class">
                <i class="layui-icon layui-icon-return"></i>返回
            </button>
        </div>
    </div>
<!-- 身体 -->
    <div class="layui-container">
        <div class="layui-row">
            <div class="layui-col-md10">
                <div class="layui-card">
                    <form class="layui-form" id="account-form">
                    <div class="layui-card-body ">
                        <div id="idv">
                            <div class="div_head">
                                <div class="layui-upload" id="div_up">
                                    <div class="layui-upload-list">
                                        <!--
                                        <img class="layui-upload-img" id="avatarUrl" src="images/nn.png"/>
                                        -->
                                        <img src="" id="avatarUrl"/>
                                    </div>
                                    <div class="layui-upload" id="upload_pictures">更换头像</div>
                                </div>
                            </div>
                        </div>
                        <div id="idvv">
                                <div class="div_forms">
                                    <table class="div_table">
                                        <tr>
                                            <td class="div_td1">
                                                <div class="td_font"><label class="layui-form-label"><span>*</span>账户:</label></div>
                                            </td>
                                            <td class="div_td2">
                                                <input id="trueName" class="layui-input" type="text" name="account" required  lay-verify="required" placeholder="" autocomplete="off" disabled="disabled">
                                                <input type="hidden" class="layui-input" name="userId">
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="div_td1">
                                                <label class="layui-form-label"><span>*</span>Email:</label>
                                            </td>
                                            <td class="div_td2">
                                                <input id="email" type="text" name="email" required  lay-verify="required" placeholder="" autocomplete="off" class="layui-input" disabled="disabled">
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="div_td1">
                                                <label class="layui-form-label"><span>*</span>新密码:</label>
                                            </td>
                                            <td class="div_td2">
                                                <input id="x_password" type="password" name="newpassword" required lay-verify="required" placeholder="请输入您的新密码" autocomplete="off" class="layui-input">
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="div_td1">
                                                <label class="layui-form-label"><span>*</span>确认密码:</label>
                                            </td>
                                            <td class="div_td2">
                                                <input id="qr_password" type="password" name="confirmpassword" required lay-verify="required" placeholder="请确认您输入的密码" autocomplete="off" class="layui-input">
                                            </td>
                                        </tr>
                                    </table>
                                    <div id="submit_id">
                                        <button class="layui-btn" id="sub" lay-submit lay-filter="formDemo">完成</button>
                                    </div>
                            </div>
                        </div>
                    </div>
                        <input type="hidden" name="acatarUrl"/>
                </form>
                </div>
            </div>
        </div>
    </div>
<script>
    var $;
    var form;
    var upload;
    var element;
    var layer;
    layui.use(['form','upload', 'element', 'layer'], function(){
        form = layui.form;
        $ = layui.jquery;
        upload = layui.upload;
        element = layui.element;
        layer = layui.layer;
        var user = JSON.parse(localStorage.getItem('user'));
        
        var create =localStorage.getItem("trueUser");
        var founder=JSON.parse(create);
        $("input[name=account]").val(user.account);
        $("input[name=userId]").val(user.userId);
        $("input[name=email]").val(user.email);
        $("#avatarUrl").attr("src",user.acatarUrl);
        var id=$("input[name=userId]").val();

        $("#sub").bind('click',function(){
            var conpwd=$("input[name=confirmpassword]").val();
            var newpwd=$("input[name=newpassword]").val();
            if(newpwd!=''&&conpwd!=''){
                if(conpwd==newpwd){
                    $.ajax({
                        url : '/User/updateUser',
                        type : "post",
                        dataType : "json",
                        data : {"userId":id,"password":conpwd},
                        success : function(data) {
                            if(data.data){
                                layer.msg("修改成功", {icon: 1});
                            }
                        }
                    })
                }else{
                    layer.msg('上传失败，请重置', {icon: 2});
                }
            }else{
                layer.msg('上传失败', {icon: 2});
            }
        })
        var uploadInst = upload.render({
            elem: '#upload_pictures'
            ,url: '/Upload/upload'
            ,accept: 'file'
            ,field:'file'
            ,auto:true
            //,bindAction:'#subUpload'
            ,accept:'images'
            ,acceptMime: 'image/jpeg,image/png'
            ,ext: 'jpg|png|bmp|jpeg'
            ,size: 4096
            ,done: function(res){
                $('#avatarUrl').attr('src', res.data);
                parent.$('#headerImage').attr('src',res.data);
                $('input[name = acatarUrl]').val(res.data);
                $.ajax({
                    url:'/User/updateUser',
                    dataType:'json',
                    data:{"userId":$('input[name = userId]').val(),"acatarUrl":res.data},
                    success:function (data) {
                        if(data.data){
                            layer.msg("修改成功");
                        }else{
                            layer.msg("修改失败");
                        }
                    }
                });
                if(res.code > 0){
                    return layer.msg('');
                }
                $('#demoText').html('');
            },error: function(){
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;"></span> <a class="layui-btn layui-btn-xs demo-reload"></a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            }
        });
        load();

        form.on('submit(formDemo)', function(data){
            $.ajax({
                url:'/User/updateUser',
                dataType:'json',
                data:data.field,
                success:function (data) {
                    if(data.data){
                        layer.msg("修改成功");
                    }else{
                        layer.msg("修改失败");
                    }
                }
            });
            return false;
        });
    });

    function backOff() {
        var arr = localStorage.getItem("numArr");
        var numArr = arr.split(",");
        numArr.pop();
        window.parent.layui.element.tabChange('tab',numArr[numArr.length - 1]);
        localStorage.setItem("numArr",numArr);
    }


    function load(){
        $(".tit_refresh").bind('click',function(){
            location.reload();
        })
        $(".tit_back").bind('click',function(){
            window.history.go(-1);
        })
    }
</script>
</body>
</html>